<template>
  <el-tabs v-model="activeName">
    <el-tab-pane
      label="不含分值和答案(问卷)"
      name="first"
    >
      <el-scrollbar :height="getBodyHeight + 'px'">
        <div class="tip-wrap">
          <div class="left-tips">
            <div
              v-for="tips in tipsDataList"
              :key="tips.title"
              class="item-demo"
            >
              <div class="item">
                <span class="title">{{ tips.title }}</span>
                <p class="content">
                  {{ tips.content }}
                </p>
              </div>
            </div>
          </div>
          <div class="preview">
            <generate-form
              ref="generateForm"
              :form-config="tipsDataConfig"
              :page-form-model="{}"
            />
          </div>
        </div>
      </el-scrollbar>
    </el-tab-pane>
    <el-tab-pane
      label="含分值和答案(考试)"
      name="third"
    >
      <el-scrollbar :height="getBodyHeight + 'px'">
        <div class="tip-wrap">
          <div class="left-tips">
            <div
              v-for="tips in examTipsDataList"
              :key="tips.title"
              class="item-demo"
            >
              <div class="item">
                <span class="title">{{ tips.title }}</span>
                <p class="content">
                  {{ tips.content }}
                </p>
              </div>
            </div>
          </div>
          <div class="preview">
            <generate-form
              ref="examGenerateForm"
              :form-config="examTipsDataConfig"
              :page-form-model="{}"
            />
          </div>
        </div>
      </el-scrollbar>
    </el-tab-pane>
  </el-tabs>
</template>

<script name="ImportFormItem" setup>
import GenerateForm from "./PreviewForm.vue";
import { computed, ref } from "vue";
import { formConf } from "@/views/formgen/components/GenerateForm/config";
import { parseText } from "@/views/formgen/components/FormDesign/import/parseTextItem";

const activeName = ref("first");
const tipsDataList = [
  {
    title: "单选题:",
    content: "【单选框组】您经常创建什么类型的项目？\n" + "问卷调研\n" + "投票评选\n" + "测评考试"
  },
  {
    title: "多选题:",
    content: "【多选框组】您了解过哪些问卷系统？\n" + "  问卷网\n" + "  腾讯问卷\n" + "  金数据\n" + "  填鸭表单\n"
  },
  {
    title: "填空题:",
    content: "【单行文本】请填写您的问题和建议"
  },
  {
    title: "下拉题:",
    content: "【下拉选择】性别\n" + "  男\n" + "  女"
  },
  {
    title: "图片选择题:",
    content: "【图片选择】请选择您最喜欢的图片?\n   图片1\n   图片2"
  },
  {
    title: "日期时间:",
    content: "【日期时间】请输入您的生日"
  },
  {
    title: "评分:",
    content: "【评分组件】给我们的体验打几分"
  },
  {
    title: "欢迎语:",
    content: "【文本描述】 感谢您能抽出几分钟时间来参加本次答题，现在我们就马上开始吧！"
  }
];

const tipsDataConfig = computed(() => {
  // 拼接 item.content
  let text = "";
  tipsDataList.forEach(item => {
    text += item.content + "\n";
  });

  return {
    ...formConf,
    fields: parseText(text)
  };
});

const examTipsDataConfig = computed(() => {
  // 拼接 item.content
  let text = "";
  examTipsDataList.forEach(item => {
    text += item.content + "\n";
  });

  return {
    ...formConf,
    fields: parseText(text)
  };
});

const examTipsDataList = [
  {
    title: "填空题:",
    content: "【单行文本】鹅鹅鹅，______？（10分）\n正确答案：曲项向天歌\n" + "答案解析：咏鹅"
  },
  {
    title: "单选题:",
    content: "【单选框组】2+2=？（10分）\n 1\n 4\n" + " 2（正确答案）\n" + "答案解析：问问百度\n"
  },
  {
    title: "单选题（每个选项单独计分）:",
    content: "【单选框组】你喜欢哪些课程？(单独计分)\n 语文（10分）\n 数学（20分）\n" + " 英语（30分）\n" + "答案解析：问问百度\n"
  },
  {
    title: "多选题:",
    content:
      "【多选框组】 填鸭多选题支持哪些计分方式？（31分）\n" +
      " A.全部答对才得分（正确答案）\n" +
      " B.答对几项得几分，答错不得分（正确答案）\n" +
      " C.每个选项都有相应分值（正确答案）\n" +
      " 答案解析：多选题支持三种计分方式"
  }
];

import { useWindowSize } from "@vueuse/core";

const { height } = useWindowSize();

const getBodyHeight = computed(() => {
  return height.value - 380;
});
</script>

<style lang="scss" scoped>
.tip-wrap {
  display: flex;
}

.left-tips {
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.item-demo {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  user-select: text;
  width: 100%;

  .item {
    margin-bottom: 10px;
    padding: 10px;

    .title {
      font-size: 14px;
      line-height: 25px;
      margin-left: 10px;
    }

    .content {
      width: 320px;
      font-size: 14px;
      color: var(--el-text-color);
      min-height: 70px;
      padding: 10px;
      border-radius: 5px;
      background-color: var(--el-bg-color-page);
      white-space: pre-wrap;
    }
  }
}

.preview {
  width: 50%;
  height: 100%;
  border: var(--el-border);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;

  .generate-form {
    height: 100%;
  }
}
</style>
